<template lang="">
  <div class="transfer-kupono">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form :model="params" label-width="150">
          <el-row :gutter="50" style="margin-top: 25px">
            <el-col :span="6">
              <el-form-item label="开始日期：">
                <el-date-picker
                  v-model="params.startdate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结束日期：">
                <el-date-picker
                  v-model="params.enddate"
                  type="date"
                  placeholder="请选择"
                  clearable
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              /></el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="危废类别：">
                <el-select
                  v-model="params.wastetype"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    class="select-item"
                    v-for="item in wasteList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="6"
              ><el-form-item label="批次号：" label-width="150">
                <el-input
                  v-model="params.batchno"
                  clearable
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="运输单位：" label-width="150">
                <el-input v-model="params.customername" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="处置单位：" label-width="150">
                <el-input v-model="params.enterprisename" clearable></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="转移状态：">
                <el-input v-model="params.status" clearable></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <div class="search-btn-wrap">
                <el-button
                  type="primary"
                  style="margin-left: 20px"
                  @click="getList"
                  ><el-icon style="color: #fff; margin-right: 5px"
                    ><Search /></el-icon
                  >查询</el-button
                >
                <!-- <button class="export-page">导出本页</button> -->
                <button class="export-all" @click="exportAll">导出全部</button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-wrap">
      <el-table
        :data="tableData"
        :show-overflow-tooltip="true"
        border
        class="table-height"
        style="width: 100%"
      >
        <!-- <el-table-column type="selection" align="center" /> -->
        <el-table-column prop="batchno" align="center" label="批次号" />
        <el-table-column
          prop="committime"
          align="center"
          label="创建日期"
          width="240"
        />
        <el-table-column align="center" label="废物名称" width="150">
          <template #default="{ row }">
            <div>
              {{ wasteList.find((item) => item.value == row.wastetype)?.label }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wastenum"
          align="center"
          label="拟转移量"
          width="150"
        >
          <template #default="{ row }">
            <div>{{ row.wastenum }}kg</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wastenum"
          align="center"
          label="实际转移量"
          width="150"
        >
          <template #default="{ row }">
            <div>{{ row.wastenum }}kg</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wastenum"
          align="center"
          label="实际接收量"
          width="150"
        >
          <template #default="{ row }">
            <div>{{ row.wastenum }}kg</div>
          </template>
        </el-table-column>
        <el-table-column prop="enterprisename" align="center" label="单位" />

        <el-table-column align="center" label="状态" width="150">
          <template #default="{ row }">
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 104px;
                  height: 38px;
                "
              >
                {{
                  row.status == 1
                    ? "正常"
                    : row.status == 2
                    ? "联单作废"
                    : row.status == 0
                    ? "未知"
                    : "--"
                }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          v-movel:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
          @getDataList="getList"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import http from "@http";
import ElMessage from "@/components/ElMessage.js";
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
let params = reactive({ page: 1, pagesize: 10 });
let handleSearch = () => {};
let total = ref(11);
let tableData = ref([]);
let wasteList = ref([]);
let exportAll = () => {
  // const loading = ElLoading.service({
  //   lock: true,
  //   text: "导出中......",
  //   background: "rgba(0, 0, 0, 0.7)",
  // });
  let a = document.createElement("a");

  a.setAttribute("target", "_blank");
  a.href =
    import.meta.env.VITE_SERVE +
    "/admPCExportTransferOrder/doExportTransferOrder";

  a.click();
};
let getList = () => {
  http({ url: "/admPCTransferOrder/datalist", data: params }).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list;
      total.value = res.data.total;
      ElMessage({ msg: "查询成功" });
    }
  });
};
getList();
http({ url: "/listitem/getmodule", data: { module: "B03" } }).then((res) => {
  if (res.code == 0) {
    wasteList.value = res.data.map((item) => {
      return { value: item.id, label: item.name };
    });
  }
});
</script>
<style lang="scss" scoped>
.transfer-kupono {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;

  .title-wrap {
    height: 190px;
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      padding-left: 35px;
      padding-right: 43px;
      .search-btn-wrap {
        display: flex;
        align-items: center;
        .export-page {
          width: 124px;
          height: 37px;
          background: #ff9c00;
          border-radius: 4px;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          margin-left: 28px;
        }
        .export-all {
          width: 110px;
          height: 37px;
          background: #02cf2d;
          border-radius: 4px;
          margin-left: 28px;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
        }
      }
    }
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 143px);
    background: #fff;

    padding: 10px 8px 0 8px;
    .table-height {
      max-height: calc(100vh - 41.4vh);
      overflow-y: scroll;
    }
  }
}
</style>
